<!doctype html>
<script src=implementation.js></script>
<style>
p, ol, ul, blockquote {
	margin-top: 0;
	margin-bottom: 0;
}
[contenteditable] { white-space: pre-wrap }
</style>
<title>Specification-based rich text editor</title>

<button onclick='myExecCommand("bold")'><b>B</b></button>
<button onclick='myExecCommand("italic")'><i>I</i></button>
<button onclick='myExecCommand("underline")'><u>U</u></button>
<button onclick='myExecCommand("strikethrough")'><s>S</s></button>

<button onclick='myExecCommand("subscript")'>X<sub>S</sub></button>
<button onclick='myExecCommand("superscript")'>X<sup>S</sup></button>

<div
contenteditable
style="border: inset 2px #ccc;min-height:20em"
>Hello</div>

<script>
document.querySelector("[contenteditable]").onkeypress = function(e) {
	if (e.altKey || e.ctrlKey || e.charCode == 0) {
		return true;
	}
	if (e.keyCode == 13 && !e.shiftKey) {
		myExecCommand("insertparagraph");
	} else if (e.keyCode == 13) {
		myExecCommand("insertlinebreak");
	} else {
		myExecCommand("inserttext", false, String.fromCharCode(e.charCode));
	}
	return false;
}
document.onkeydown = function(e) {
	if (e.keyCode == 8 || e.keyCode == 46) {
		// Delete, backspace
		return false;
	}
	// Bold/italic/underline.
	if (e.ctrlKey
	&& ["b", "u", "i"].indexOf(String.fromCharCode(e.keyCode).toLowerCase()) != -1) {
		return false;
	}
}
document.onkeyup = function(e) {
	if (e.keyCode == 8) {
		myExecCommand("delete");
	} else if (e.keyCode == 46) {
		myExecCommand("forwarddelete");
	} else if (e.ctrlKey && String.fromCharCode(e.keyCode).toLowerCase() == "b") {
		myExecCommand("bold");
	} else if (e.ctrlKey && String.fromCharCode(e.keyCode).toLowerCase() == "i") {
		myExecCommand("italic");
	} else if (e.ctrlKey && String.fromCharCode(e.keyCode).toLowerCase() == "u") {
		myExecCommand("underline");
	}
}
</script>
